<template>
	<view>
		<u-popup  v-model="jobtypeshow" mode="bottom" width="100%" ref="auth" :mask-close-able="false" :custom="true" :mask-click="false" @close="closejob">
            <view class="popone">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav">
                    <view class="cha" @click="closejob">
                        <image class="icon_gbcha" src="@/pages_admin/static/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename">请选择工种</text>
                    <scroll-view class="gonglist" scroll-y>
                        <view class="gongitem" :class="newgzinfo.id==item.id?'xuan':''" v-for="(item,index) in gzlist" :key="index" @click="getgong(item)">
                            <view class="gleft">
                                <text class="gname">{{item.name}}</text>
                                <text class="gmiao txt">{{ item.descript }}</text>
                            </view>
                            <image class="quans" src="@/pages_admin/static/icon_xz_s.png" mode="" />
                            <image class="quan" src="@/pages_admin/static/icon_xz_n.png" mode="" />
                        </view>
                    </scroll-view>
                    <view class="toubtn" @click="quegong">确定</view>
                </view>
            </view>
        </u-popup>
	</view>
</template>

<script>
	export default {
		name: 'ConfirmOrderPop',
		props: {
			jobtypeshow: {
				type: Boolean,
				default: false
			},
            gzlist: {
				type: Array,
				default: []
			},
            gzinfo:{
                type: Object,
				default: {}
            }

		},
		data() {
			return {
                newgzinfo:{}
			};
		},
		created() {
			
		},
		mounted() {

		},
		methods: {
            closejob(){
                this.$emit("closejob")
            },
            quegong(){
                // let gzlist = this.gzlist
                // let parms = {}
                // for(let i in gzlist){
                //     if(gzlist[i].isselect){
                //         parms = gzlist[i]
                //     }
                // }
                this.$emit('quegong',this.newgzinfo)
            },
            getgong(item){
                // let gzlist = this.gzlist
                // for(let i in gzlist){
                //     gzlist[i].isselect = false
                // }
                // for(let i in gzlist){
                //     if(item.id == gzlist[i].id){
                //         gzlist[i].isselect = true
                //     }
                // }
                // console.log(gzlist)
                // this.gzlist = gzlist
                // this.$forceUpdate() =
                this.newgzinfo = item
            }

		}
	};
</script>

<style lang="scss" scoped>
    /deep/.u-drawer-bottom{
        background-color: transparent;
    }
    .gonglist{
        max-height: 800rpx;
        margin: 30rpx 0;
        .gongitem{
            background: #FFFFFF;
            border-radius: 30rpx;
            margin: 0 0 20rpx;
            padding: 30rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            .gleft{
                display: flex;
                flex-direction: column;
                .gname{
                    font-weight: 800;
                    font-size: 36rpx;
                    color: #111111;
                }
                .gmiao{
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #999999;
                    max-width: 400rpx;
                    display: block;
                    margin-top: 10rpx;
                }
            }
            .quan{
                margin-left: auto;
                width: 38rpx;
                height: 38rpx;
                display: inline-block;
            }
            .quans{
                margin-left: auto;
                width: 38rpx;
                height: 38rpx;
                display: none;
            }
        }
        .xuan{
            .quan{
                display: none
            }
            .quans{
                display: inline-block;
            }
        }
    }
    .toubtn{
        height: 90rpx;
        background: linear-gradient(90deg, #FF8F39, #FF4D43);
        border-radius: 45rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFFFFF;
        width: 100%;
    }
	.popone{
        width: 100%;
        background: #F5F5F5;
        border-radius: 30rpx 30rpx 0rpx 0rpx;
        // height: 530rpx;
        .bg{
            position: absolute;
            width: 100%;
            height: 300rpx;
            border-radius: 30rpx 30rpx 0 0 ;
        }
        .icon_gbcha{
            width: 40rpx;
            height: 40rpx;
            margin-left: auto;
            position: absolute;
            right: 30rpx;
            top: 30rpx;
            pointer-events: auto !important;
        }
        .yuedu{
            height: 80rpx;
            display: flex;
            padding: 0 30rpx;
            align-items: center;
            .icon_xz_n{
                width: 36rpx;
                height: 36rpx;
                margin-right: 8rpx;
            }
            .xy{
                font-weight: 500;
                font-size: 20rpx;
                color: #999999;
                display: block;
                width: 90%;
            }
            .xyhu{
                color: rgba(234, 89, 24, 1);
            }
        }
        .kaolv{
            font-weight: bold;
            font-size: 28rpx;
            color: #666666;
            display: block;
            text-align: center;
            margin-top: 20rpx;
        }
        .phonenav{
            position: relative;
            // margin: 30rpx;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            padding: 40rpx 30rpx;
            .img_aq{
                width: 173rpx;
                height: 211rpx;
                margin-bottom: 20rpx;
            }
            .jiename{
                font-weight: bold;
                font-size: 36rpx;
                color: #111111;
            }
            .queren{
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                display: block;
                margin: 40rpx 0 80rpx;
            }
            .chaka{
                padding: 30rpx;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #F6F7F9;
                border-radius: 16rpx;
                margin: 25rpx 0;
                .chaname{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #111111;
                }
                .phonenum{
                    display: block;
                    font-weight: bold;
                    font-size: 50rpx;
                    color: #F06047;
                    margin: 10rpx 0;
                }
                .xiugai{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .noben{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                    }
                    .xiu{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #F06047;
                        display: inline-block;
                        margin-left: 6rpx;
                    }
                }
            }
            .dianbtn{
                height: 90rpx;
                background: linear-gradient(90deg, #FF8F39, #FF4D43);
                border-radius: 45rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin-top: 20rpx;
                .bm{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                }
                .bmmaio{
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #FFFFFF;
                }
            }
            .bzhang{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 30rpx;
                .icon_ts{
                    margin-right: 6rpx;
                    width: 24rpx;
                    height: 24rpx;
                }
                .zhiname{
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #F06047;
                }
            }
        }
    }
</style>
